<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<style>
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

h1{font-size:20px;border-bottom:1px solid;}
h2{font-size:18px;border-bottom:1px solid;color:blue;margin:10px 0px;clear:both;}
/*demo1*/
#demo1{margin:5px 10px;width:500px;}
#demo1 ul{
/*强制 ul 包围浮动的 li 元素*/
overflow:hidden;
}
#demo1 li{
/*让 li 元素水平排列*/
float:left;
/*去掉项目符号*/
list-style-type:none;
}
#demo1 li a{
/*让链接填满 li 元素*/
display:block;
padding:0 16px;
/*去掉链接的下划线*/
text-decoration:none;
color:#999;
}
#demo1 li + li a {border-left:1px solid #aaa;}
#demo1 a:hover {color:#555;}

/*demo2*/
#demo2{width:450px;}
#demo2 ul{
overflow:hidden;
background-color:gray;
padding-left:20px;
margin: 10px auto;
border-radius:8px;				
}
#demo2 li {	
float:left;
padding:10px;
}
#demo2 a{	
text-decoration:none;
color:white;
}
#demo2 a:hover{
text-decoration:underline;
color:red;
}
/*demo2*/
#demo3{width:450px;}
#demo3 ul{
overflow:hidden;
background-color:gray;
padding-left: 20px;
margin: 10px auto;	
border:1px solid white;		
}
#demo3 li {	
display:inline-block;
width:60px;
}
#demo3 a{	
display:block;
text-decoration:none;
padding:10px 0;
color:white;
text-align:center;
}
#demo3 a:hover{
display:block;
background:red;
font-weight:bold;
}
#demo4{margin:10px; width:100px;}
#demo4 ul{background-color:gray; border-radius:3px;}
#demo4 li{text-align:center;}
#demo4 a{	
text-decoration:none;
padding:5px 10px;
display:block;
color:white;
}
#demo4 a:hover{
display:block;
font-weight:bold;
background-color:red;
}
/*#demo5*/
/* add class 'vertical' to nav for vertical top level menu */
/* font and colors*/
.multi_drop_menu {
	margin:20px;font:1em helvetica, arial, sans-serif; 	/* font color and size */
	} 
.multi_drop_menu a {
	color:#fff; 							/* text color */
	background-color:gray; 					/* background color */
	padding:.2em 1em;						/* padding around link text */
	border-width:3px; 						/* divider width */
	border-color:transparent; 				/* divider color - can be 'transparent' */
	}  					
.multi_drop_menu li:hover>a/*li:hover>a让每一级菜单中被选中的元素突出显示a:hover只显示当前选中的元素*/ {
	color:#fff; 							/* hover text color */
	background-color:green;					/* hover background color */
	}
.multi_drop_menu li a:active {
	background:#fff; 						/* b/g hilite when clicked */
	color:#ccc;								/* text color hilite when clicked */
	background-clip:padding-box;			/* prevents border hiliting */
	}	
.multi_drop_menu li ul {width:9em;} 		/* width of 2nd, 3rd level menus */
.multi_drop_menu li li a {   
	border-right-style:none;				
	border-top-style:solid;					
	}
.multi_drop_menu li li li a {   
	border-left-style:solid;
}

/* "MECHANICAL" STYLINGS - ADJUST WITH CARE! */
/* menu mechanics */
/* level 1 */
.multi_drop_menu * {margin:0; padding:0;}
.multi_drop_menu ul {float:left;} /* forces ul to enclose floated li elements */
.multi_drop_menu li {  
	float:left; /* makes menu horizontal */
	list-style-type:none; /* removes default bullets off lists */
	position:relative; /* position context for child list */
	}
.multi_drop_menu li a {   
	display:block; /* makes link fill li */
	border-right-style:solid; /* adds a right border on the links */
	background-clip:padding-box; /* background only under padding, not border */  
	text-decoration:none; /* removes link underlining */
	}
.multi_drop_menu li:last-child a {   
	border-right-style:none;
	}
/* level 2*/
.multi_drop_menu li ul {
	display:none; /* hides levels 2, 3, etc. */
	position:absolute; /* position relative to parent menu */
	left:0; /* aligns left of sub-menu to parent */
	top:100%; /* aligns to bottom of parent */
	}
.multi_drop_menu li:hover > ul {
	display:block; /* displays menu when parent hovered */
	}
.multi_drop_menu li li {
	position:relative; /* position context for child list */
	float:none; /* kills inherited float - makes list stack */
	}
/* level 3 */
.multi_drop_menu li li ul {
	position:absolute; /* position relative to parent menu */
	left:100%; /* aligns menu with right of parent */
	top:0; /* aligns with parent menu choice top */
	}


/*顶级菜单垂直显示样式*/
.multi_drop_menu.vertical {width:8em;}
.multi_drop_menu.vertical li a {
border-right-style:none;
border-top-style:solid;
}
.multi_drop_menu.vertical li li a {border-left-style:solid;}
.multi_drop_menu.vertical ul,
.multi_drop_menu.vertical li {
/*让顶级菜单垂直显示*/
float:none;
}
.multi_drop_menu.vertical li ul {
/*子菜单左边与上一级菜单右边对齐*/
left:100%;
/*子菜单顶边与上一级菜单项顶边对齐*/
top:0;
}

</style>

</head>
<body>
<h1>导航栏菜单</h1>
<h2>横向菜单栏</h2>
<nav id="demo1">
	<ul>
	  <li><a href="#">首页</a></li>
	  <li><a href="#">工具</a></li>
	  <li><a href="#">常见问题</a></li>
	  <li><a href="#">ABOUT</a></li>
	</ul>
</nav>
<nav id="demo2">
	<ul>
	  <li><a href="#">首页</a></li>
	  <li><a href="#">工具</a></li>
	  <li><a href="#">常见问题</a></li>
	  <li><a href="#">ABOUT</a></li>
	</ul>
</nav>
<nav id="demo3">
	<ul>
	  <li><a href="#">首页</a></li>
	  <li><a href="#">工具</a></li>
	  <li><a href="#">常见问题</a></li>
	  <li><a href="#">ABOUT</a></li>
	</ul>
</nav>
<h2>纵向菜单栏</h2>
<nav id="demo4">
	<ul>
	  <li><a href="#">首页</a></li>
	  <li><a href="#">工具</a></li>
	  <li><a href="#">常见问题</a></li>
	  <li><a href="#">ABOUT</a></li>
	</ul>
</nav>
<h2>三级横向下拉菜单栏</h2>
<nav class="multi_drop_menu">
<!-- 一级开始 -->
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">工具</a></li>
		<li><a href="#">常见问题</a></li>
		<li><a href="#">ABOUT</a>
			<!-- 二级开始 -->
			<ul>
				<li><a href="#">ABOUT-1</a></li>
				<li><a href="#">ABOUT-2</a></li>
				<li><a href="#">ABOUT-3</a>
					<!-- 三级开始 -->
					<ul>
					<li><a href="#">ABOUT-3-1</a></li>
					<li><a href="#">ABOUT-3-2</a></li>
					<li><a href="#">ABOUT-3-3</a></li>
					<li><a href="#">ABOUT-3-4</a></li>
					</ul>
					<!-- 三级结束 -->
				</li>
				<li><a href="#">ABOUT-4</a></li>
			</ul>
			<!-- 二级结束 -->
		</li>
	</ul>
	<!-- 一级结束 -->
</nav>
<h2>三级主菜单垂直向下拉菜单栏</h2>
<nav class="multi_drop_menu vertical">
<!-- 一级开始 -->
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">工具</a></li>
		<li><a href="#">常见问题</a></li>
		<li><a href="#">ABOUT</a>
			<!-- 二级开始 -->
			<ul>
				<li><a href="#">ABOUT-1</a></li>
				<li><a href="#">ABOUT-2</a></li>
				<li><a href="#">ABOUT-3</a>
					<!-- 三级开始 -->
					<ul>
					<li><a href="#">ABOUT-3-1</a></li>
					<li><a href="#">ABOUT-3-2</a></li>
					<li><a href="#">ABOUT-3-3</a></li>
					<li><a href="#">ABOUT-3-4</a></li>
					</ul>
					<!-- 三级结束 -->
				</li>
				<li><a href="#">ABOUT-4</a></li>
			</ul>
			<!-- 二级结束 -->
		</li>
	</ul>
	<!-- 一级结束 -->
</nav>
<script>

</script>
</body>
</html>